<template>
  <div class="notice_content">
    <jm-head ref="head"></jm-head>
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="0"
        @load="getList"
      >
          <div class="notice_list box" v-for="(item,index) in list" :key = "index" @click="goDetail(item.url)">
              <img src="@/assets/img/notice.jpg" alt="头像">
              <div class="notice_menu box">
                  <h2 class="ellipsis">{{item.title}}</h2>
                  <p class="ellipsis">{{item.created_at}}</p>
              </div>
              <div class="notice_fr">></div>
          </div>
      </van-list>
  </div>
</template>

<script>
  import { getList } from "@/api/mean";
  import JmHead from '../head/head'
  import Vue from 'vue'
  import { List } from 'vant';

  Vue.use(List)
  export default {
      name: 'mean',
      components: {
          JmHead
      },
      data () {
          return {
              list: [],
              page: 1,
              active: 0,
              loading: false,
              finished: false,
          }
      },
      methods: {
          getList() {
              getList({page: this.page}).then(res => {
                  this.list = this.list.concat(res.data.data)
                  this.page++
                  this.loading = false
                  if (this.page > res.data.last_page) {
                      this.finished = true
                  }
              })
          },
          goDetail(url) {
              location.href = url
          }
      },
      activated: function () {
          this.list = []
          this.active = 0
          this.page = 1
          this.finished = false
          const _this = this
          setTimeout(function(){
            _this.active = 1
          }, 100)

          this.$refs.head.setNavBarUrl()
      }
  }
</script>

<style lang="stylus" scoped>
    .notice_content
        width 100%
        min-height 100vh
        overflow hidden
        .notice_list
            padding .2rem .3rem
            overflow hidden
            display flex
            display -webkit-flex
            width 100%
            margin 0 auto
            img
                width 1rem
                height 1rem
                border-radius 4px
                overflow hidden
                margin-right .3rem
            .notice_menu
                flex 1
                -webkit-flex 1
                overflow hidden
                h2
                    width 100%
                    line-height 0.4rem
                    font-size 0.28rem
                    color #000
                    margin-top .1rem
                p
                    width 100%
                    line-height 0.4rem
                    font-size 0.24rem
                    color #000

            .notice_fr
                width .3rem
                line-height 1rem
                color #9e9e9e

</style>
